<template>
  <div class="index-ChartDeviceMatain">
    <div class="index-interior-title-box">
      <div class="index-interior-title-left" style="color: white !important;">趋势图</div>
    </div>
    <div ref="chartRef" class="index-ChartDeviceMatain-chart"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, reactive, getCurrentInstance, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
const { proxy } = getCurrentInstance()
const router = useRouter()

const chartRef = ref(null)
let mapChart = null

let xLabel = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']

let option = {
  grid: {
    top: '20%',
    left: '0%',
    right: '2%',
    bottom: '4%',
    containLabel: true
  },
  legend: {
    orient: 'horizontal',
    top: 0,
    left: 'center',
    itemWidth: 12,
    itemHeight: 4,
    textStyle: {
      color: 'rgba(255,255,255,0.6)',
      fontSize: 10
    }
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      axisLabel: {
        color: '#C2AA90',
        fontSize: 10
      },
      axisTick: {
        alignWithLabel: true
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#7C6951'
        }
      },
      data: xLabel
    }
  ],
  yAxis: {
    type: 'value',
    axisLabel: {
      color: '#C2AA90',
      fontSize: 10
    },
    splitLine: {
      lineStyle: {
        type: 'dashed',
        color: 'rgba(207,166,114,0.4)'
      }
    }
  },
  series: [
    {
      name: '告警处置率',
      type: 'line',
      symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
      showAllSymbol: true,
      symbolSize: 0,
      smooth: false,
      color: '#22EEFCFF', // 线条颜色
      lineStyle: {
        width: 2,
        color: '#22EEFCFF', // 线条颜色
        borderColor: 'rgba(0,0,0,.4)'
      },
      tooltip: {
        show: true
      },
      data: [40, 37, 38, 32, 40, 45, 46, 41, 36, 40, 35, 33],
      step: 'start'
    },
    {
      name: '故障处置率',
      type: 'line',
      symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
      showAllSymbol: true,
      symbolSize: 0,
      smooth: false,
      color: '#F1B86DFF', // 线条颜色
      lineStyle: {
        width: 2,
        color: '#F1B86DFF', // 线条颜色
        borderColor: 'rgba(0,0,0,.4)'
      },
      tooltip: {
        show: true
      },
      data: [20, 30, 35, 33, 25, 20, 33, 36, 30, 40, 20, 19],
      step: 'start'
    },
    {
      name: '设备告警误报率',
      type: 'line',
      symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
      showAllSymbol: true,
      symbolSize: 0,
      smooth: false,
      color: '#4F5FF0FF', // 线条颜色
      lineStyle: {
        width: 2,
        color: '#4F5FF0FF', // 线条颜色
        borderColor: 'rgba(0,0,0,.4)'
      },
      tooltip: {
        show: true
      },
      data: [66, 61, 66, 67, 60, 77, 68, 66, 61, 66, 55, 60],
      step: 'start'
    }
  ]
}

const resizeHandler = () => {
  mapChart.resize()
}
const renderMap = () => {
  if (!mapChart) {
    mapChart = echarts.init(chartRef.value, null, {
      renderer: 'svg'
    })
  }
  mapChart.dispatchAction({
    type: 'restore'
  })
  mapChart.setOption(option)
  mapChart.dispatchAction({ type: 'dataZoom', start: 0, end: 100 })
}
onMounted(() => {
  renderMap()
  window.addEventListener('resize', resizeHandler)
})
onUnmounted(() => {
  window.removeEventListener('resize', resizeHandler)
})
</script>

<style lang="scss">
.index-ChartDeviceMatain {
  width: 100%;
  height: 100%;
  display: flex;
  box-sizing: border-box;
  overflow: hidden;
  flex-direction: column;

  // border: 1px solid red;
  .index-ChartDeviceMatain-chart {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 12px;
    // border: 1px solid red;
  }
}
</style>
